<div class="row">
<style>
img{width:50px;border:none;}
.my_red{color:red;}
.my_green{color:green;}
</style>
<!-- 表示一个成功的或积极的动作 -->
<a href="javascript:void(0)"><button type="button" class="btn btn-primary active">友链列表</button></a>
<a href="javascript:void(0)"><button type="button" class="btn btn-primary addLink">新增友链</button></a>
<table class="table table-hover table-responsive">
   <thead>
      <tr>
         <th>显示顺序</th>
         <th>站点名称</th>
         <th>站点URL</th>
         <th>站点说明</th>
         <th>友链状态</th>
         <th>操作</th>
      </tr>
   </thead>
   <tbody>
   <volist name="data" id="data">
      <tr id="tr_{$data.id}" data-id="{$data.id}">
         <td id="sort_{$data.id}">{$data.sort}</td>
         <td id="name_{$data.id}">{$data.name}</td>
         <td id="url_{$data.id}">{$data.url}</td>
         <td><span title="{$data.desc}" id="desc_{$data.id}" data-toggle="tooltip" 
   data-placement="top">{$data.desc|mb_substr=0,30,'utf-8'}...</span></td>
         <td >
         	<switch name="data.status">
         		<case value="1"><span style="color: green;">开启</span></case>
				<case value="0"><span style="color: red;">关闭</span></case>
         	</switch>
         </td>
         <td>
          <a href="javascript:void(0);" class="editLink">编辑</a>
          <switch name="data.status">
         		<case value="1">
         			<a href="javascript:void(0);" class="setstatus" data-value="0">关闭</a>
         		</case>
				<case value="0">
					<a href="javascript:void(0);" class="setstatus" data-value="1">开启</a>
				</case>
         	</switch>
          <a href="javascript:void(0);" class="delete">删除</a>
          </td>
      </tr>
    </volist>
   </tbody>
</table>
{$page}
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-body">
         	<form class="form-horizontal" role="form">
			   <div class="form-group">
			      <label for="sitename" class="col-sm-2 control-label">站点名称</label>
			      <div class="col-sm-6"><input type="text" class="form-control reset" id="sitename" placeholder="请输入站点名称[必填]"></div>
			   </div>
			   <div class="form-group">
			   	  <label for="siteurl" class="col-sm-2 control-label">站点URL</label>
			      <div class="col-sm-6"><input type="url" class="form-control reset" id="siteurl" placeholder="http://"></div>
			   </div>
			   <div class="form-group">
			   	  <label for="sitedesc" class="col-sm-2 control-label">站点说明</label>
			      <div class="col-sm-10"><input type="text" class="form-control reset" id="sitedesc" placeholder="请输入站点说明[选填]"></div>
			   </div>
			   <div class="form-group">
			   	  <label for="sitesort" class="col-sm-2 control-label">显示顺序</label>
			      <div class="col-sm-3"><input type="number" class="form-control" id="sitesort" value="10"></div>
			      <span class="help-block">数字越小，友链显示越靠前</span>
			   </div>
			</form>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary siteSubmit">提交</button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-body">
         	<form class="form-horizontal" role="form">
         	<input type="hidden" id="hidden_id"/>
			   <div class="form-group">
			      <label for="name" class="col-sm-2 control-label">站点名称</label>
			      <div class="col-sm-6"><input type="text" class="form-control reset" id="name" placeholder="请输入站点名称[必填]"></div>
			   </div>
			   <div class="form-group">
			   	  <label for="url" class="col-sm-2 control-label">站点URL</label>
			      <div class="col-sm-6"><input type="url" class="form-control reset" id="url" placeholder="http://"></div>
			   </div>
			   <div class="form-group">
			   	  <label for="desc" class="col-sm-2 control-label">站点说明</label>
			      <div class="col-sm-10"><input type="text" class="form-control reset" id="desc" placeholder="请输入站点说明[选填]"></div>
			   </div>
			   <div class="form-group">
			   	  <label for="sort" class="col-sm-2 control-label">显示顺序</label>
			      <div class="col-sm-3"><input type="number" class="form-control" id="sort" value="10"></div>
			      <span class="help-block">数字越小，友链显示越靠前</span>
			   </div>
			</form>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary editSubmit">确认修改</button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

<script>
   $(function () { $("[data-toggle='tooltip']").tooltip(); });
   $(document).ready(function(){
	   $('.addLink').click(function(){
		   $('#myModal').modal('show');
	   });
	   $('.editLink').click(function(){
		   	var id=$(this).parent().parent().attr('data-id');
		   	var name=$('#name_'+id).text();
		   	var siteurl=$('#url_'+id).text();
		   	var desc=$('#desc_'+id).attr('data-original-title');
		   	var sort=$('#sort_'+id).text();
		   	$('#name').val(name);
		   	$('#url').val(siteurl);
		   	$('#desc').val(desc);
		   	$('#sort').val(sort);
		   	$('#hidden_id').val(id);
		   	$('#editModal').modal('show');
	   });
	   
	   $('.siteSubmit').click(function(){
		   var name=$('#sitename').val();
		   var siteurl=$('#siteurl').val();
		   var desc=$('#sitedesc').val();
		   var sort=$('#sitesort').val();
		   if(name=='' || siteurl==''){
			   alert('站点名称和站点URL均不能为空');
			   return false;
		   }else{
			   $.post("{:U('Friendlink/index')}",{name:name,url:siteurl,sort:sort,desc:desc},function(ret){
				   if(ret==1){
				   $('.reset').val('');
				   	alert('友链添加成功！');
				   	location.reload();
				   }else{
				   	alert('友链添加失败！请刷新页面后重试。');
				   }
			   });
		   }
	   });
	   
	   
	   $('.editSubmit').click(function(){
		   var name=$('#name').val();
		   var siteurl=$('#url').val();
		   var desc=$('#desc').val();
		   var sort=$('#sort').val();
		   var id=$('#hidden_id').val();
		   if(name=='' || url==''){
			   alert('站点名称和站点URL均不能为空');
			   return false;
		   }else{
			   $.post("{:U('Friendlink/update')}",{name:name,url:siteurl,sort:sort,desc:desc,id:id},function(ret){
				   if(ret==1){
				   $('.reset').val('');
				   	alert('友链更新成功！');
				   	location.reload();
				   }else{
				   	alert('友链更新失败！可能您未对友链做修改');
				   }
			   });
		   }
	   });
	   
	   //设置友链状态
	   $('.setstatus').click(function(){
	   	var v=$(this).attr('data-value');
	   	var id=$(this).parent().parent().attr('data-id');
	   	$.get("{:U('Friendlink/setstatus')}",{id:id,status:v},function(ret){
	   		if(ret==1){
		   		alert('友链状态设置成功！');
		   		location.reload();
		   }else{
		   		alert('友链状态设置失败！请刷新页面后重试。');
		   }
	   	});
	   });
	   
	   //删除友链
	   $('.delete').click(function(){
	   		var id=$(this).parent().parent().attr('data-id');
	   		$.get("{:U('Friendlink/delete')}",{id:id},function(ret){
	   			if(ret==1){
			   		alert('友链删除成功！');
			   		$("#tr_"+id).remove();
			   }else{
			   		alert('友链删除失败！请刷新页面后重试。');
			   }
	   		});
	   });
	   //编辑友链
	   
	   
   });
</script>
